import React from "react";
import { Line } from "@ant-design/charts";
import { _selStuExped } from "../../../../utils/exp/index";
import { connect } from "react-redux";

class Index extends React.Component {
  state = {
    isLoading: false,
    expData:[]
  };
  componentDidMount = () => {
    this.getData();
  };
  getData = () => {
    this.setState({ isLoading: true });
    _selStuExped(this.props.state.data.stu_id)
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          this.setState({ isLoading: false });
          let arr = res.data.data;
          let len = arr.length
          for(let i=0;i<len;i++){
            arr[i].exp_time = arr[i].exp_time.split("至")[1]
            arr[i].exp_mark = parseInt(arr[i].exp_mark);
          }
          this.setState({expData:arr})
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
      });
  };
  render() {
   let data = this.state.expData
    const config = {
      title: {
        visible: true,
        text: this.props.state.data.stu_name+'同学',
      },
      pixelRatio:3,
      description: {
        visible: true,
        text: "实验成绩趋势图",
      },
      padding: "auto",
      forceFit: true,
      data,
      xField: "exp_time",
      yField: "exp_mark",
      label: {
        visible: true,
        type: "point",
      },
      point: {
        visible: true,
        size: 5,
        shape: "diamond",
        style: {
          fill: "white",
          stroke: "#2593fc",
          lineWidth: 2,
        },
      },
    };
    return <Line {...config} />;
  }
}
const mapStateToProps = (state) => {
  return {
    state: state.user,
  };
};
const actionCreator = {};
export default connect(mapStateToProps, actionCreator)(Index);